
<div class="imcp_content">
    <div class="imcp_container">
        <img id="aimm" src="" />
        <div class="kuang"></div>
        <div class="top Layer"></div>
        <div class="right Layer"></div>
        <div class="bottom Layer"></div>
        <div class="left Layer"></div>
    </div>
    <div class="ctrlBar">
        <input type="text" id="example_id" name="example_name" value="100" />
    </div>
    <!-- <input class="ctrlBar" type="range" min="0" max="200" step="1" value="100"/> -->
    <div class="okClip">OK</div>
    <!--<div id="showPicBtn"><img src="" /></div>-->
</div>
<div class="maskLyer">
    <div class="uploadCont">
        <div class="uploadBtn" tapmode="hover">点击选择图片</div>
    </div>    
</div>
<style type="text/css">
        /*div{box-sizing:border-box;}*/
        *{margin:0;padding:0;}
        .imcp_container{
            width:100%;
            margin:0 auto;
            overflow: hidden;
            position: relative;
        }
        .imcp_container img{
            display: block;
            position: absolute;
            width:100%;
        }
        .imcp_container .kuang{
            position: absolute;
            left:10%;
            top:10%;
            width:80%;
            height:80%;
            /*border:1px solid #841;*/
        }
        .imcp_container .Layer{
            position: absolute;
            background-color: rgba(0,0,0,0.4);
        }
        .imcp_container .top{
            top:0;
            left:0;
            width:100%;
            height:10%;
        }
        .imcp_container .bottom{
            bottom:0;
            left:0;
            width:100%;
            height:10%;
        }
        .imcp_container .left{
            top:10%;
            left:0;
            width:10%;
            height:80%;
        }
        .imcp_container .right{
            top:10%;
            left:90%;
            width:10%;
            height:80%;
        }
        .imcp_content .ctrlBar{
            opacity: 0.6;
            display: block;
            position: absolute;
            bottom: 5px;
            left:10%;
            width: 80%;
        }
        .imcp_content .okClip{
            position: absolute;
            width:28px;
            height:28px;
            text-align: center;
            line-height: 25px;
            border-radius:50%;
            padding:4px;
            background-color:#ddd;
            top:18px;
            right:8px;
            opacity: .5;
        }
        #showPicBtn{
            position: absolute;
            width:50px;
            height:50px;
            text-align: center;
            line-height: 25px;
            border-radius:50%;
            padding:4px;
            background-color:#ddd;
            top:30px;
            right:60px;
        }
        #showPicBtn img{
            width:100%;
            height:100%;
        }
        .imcp_content{
            position: relative;
        }
        #example_id{
            display: none;
        }
        .maskLyer{
            position: fixed;
            z-index: 1000;
            top:0;
            left:0;
            background-color:rgba(0,0,0,0.6);    
        }
        .maskLyer .uploadCont{
            position: absolute;
            top:250px;
            height:60px;
            width:100%;
            text-align:center;
        }
        .maskLyer .uploadBtn{
            margin:0 auto;                                
            border-radius:30px;            
            width:180px;
            height:60px;
            line-height:60px;
            text-align:center;
            border:#F2F2F2 solid 1px;
            color:#F2F2F2;
            font-size:18px;
            font-weight:bold;
        }
        .hover{
            background-color:rgba(200,200,200,.5);
        }
</style>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<!--<script src="../../script/jquery-1.11.3.min.js"></script>-->
<script src="ion.rangeSlider.min.js"></script>
<script type="text/javascript" src="alloyimage-1.1.js"></script>
</html>